<template>
	<!-- title部分 -->
	<view class="title">
		<view class="title_leftbox" @click="goToWodeziliao">
			<image class="title_leftbox_image_fanhui" src="../../static/返回.png"></image>
		</view>
		<view class="title_middlebox">
			<view class="title_middlebox_text">忘记密码</view>
		</view>
		<view class="title_rightbox">
			<!-- <image class="title_rightbox_img" src="../../static/wenhao.png"></image> -->
		</view>
	</view>

	<!-- 安全提示 -->
	<view class="anquantishibox">
		<view class="anquantishibox_text" @click="goToYijianfankui">还未实名认证？联系客服</view>
		<!-- <view class="anquantishibox_text">1、密码至少6位，由大小写字母和数字混合而成，安全性最高。</view>
		<view class="anquantishibox_text">2、不要与昵称太相似，容易被人猜到。</view>
		<view class="anquantishibox_text">3、不要使用手机电话号码、生日、学号、车牌号、身份证号、银行卡密码等个人信息。</view>
		<view class="anquantishibox_text">4、不要使用连续或重复的数字、字母，如：123456、abcdef、111111、aaaaaa等。</view>
		<view class="anquantishibox_text">5、定期修改密码以提升账户安全性。</view> -->

	</view>
	<!-- 密码部分 -->
	<view class="mimabox">
		<view class="mimabox_textimgbox">

			<view class="mimabox_textimgbox_text2">手机号</view>
			<input class="mimabox_textimgbox_text3" placeholder="请输入手机号">

		</view>


		<view class="mimabox_textimgbox">

			<view class="mimabox_textimgbox_text2">姓名</view>
			<input class="mimabox_textimgbox_text3" placeholder="请输入姓名">
		</view>


		<!-- 旧密码 -->
		<view class="mimabox_textimgbox">

			<view class="mimabox_textimgbox_text2">身份证后六位</view>
			<input class="mimabox_textimgbox_text3" placeholder="请输入身份证后六位">
		</view>

		<!-- 新密码 -->
		<view class="mimabox_textimgbox">
			<view class="mimabox_textimgbox_text2">新密码</view>
			<input :type="newPasswordVisibility ? 'text' : 'password'" class="mimabox_textimgbox_text3"
				placeholder="6-12位数字、字母密码" v-model="newPassword">
			<image class="mimabox_textimgbox_img1" v-if="newPassword" @click="clearInput('newPassword')"
				src="../../static/qingchu.png"></image>
			<image class="mimabox_textimgbox_img2" @click="togglePasswordVisibility('newPassword')"
				:src="newPasswordVisibility ? '../../static/显示.png' : '../../static/隐藏.png'"></image>
		</view>

		<!-- 确认密码 -->
		<view class="mimabox_textimgbox">
			<view class="mimabox_textimgbox_text2">确认密码</view>
			<input :type="confirmPasswordVisibility ? 'text' : 'password'" class="mimabox_textimgbox_text3"
				placeholder="6-12位数字、字母密码" v-model="confirmPassword">
			<image class="mimabox_textimgbox_img1" v-if="confirmPassword" @click="clearInput('confirmPassword')"
				src="../../static/qingchu.png"></image>
			<image class="mimabox_textimgbox_img2" @click="togglePasswordVisibility('confirmPassword')"
				:src="confirmPasswordVisibility ? '../../static/显示.png' : '../../static/隐藏.png'">
			</image>
		</view>
	</view>

	<!-- 按钮部分 -->
	<view class="anniu">
		<button>提交</button>
	</view>




</template>

<script>
	export default {
		data() {
			return {
				oldPassword: '',
				newPassword: '',
				confirmPassword: '',
				oldPasswordVisibility: false,
				newPasswordVisibility: false,
				confirmPasswordVisibility: false,
			}
		},
		methods: {
			// 跳转到我的资料页面
			goToWodeziliao() {
				uni.navigateTo({
					url: '/pages/login/login',
				});
			},
			goToYijianfankui() {
				uni.navigateTo({
					url: '/pages/yijianfankui/yijianfankui',
				});
			},
			// 清除输入框内容
			clearInput(type) {
				this[type] = '';
				// 清除后隐藏密码
				this[type + 'Visibility'] = false;
			},
			// 切换密码可见性
			togglePasswordVisibility(type) {
				this[type + 'Visibility'] = !this[type + 'Visibility'];
			},
		}
	}
</script>

<style>
	page {
		background-color: #e8e8e8;
	}

	/* 以下是title部分样式 */
	.title {
		background-color: rgb(226, 50, 52);
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* 使左右盒子分别位于两侧 */
		padding: 2%;
	}

	.title_leftbox {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 使图标居中 */
	}

	.title_leftbox_image_fanhui {
		width: 20px;
		height: 25px;
	}

	.title_middlebox {
		flex-grow: 1;
		/* 使中间盒子占据剩余空间 */
		display: flex;
		align-items: center;
		justify-content: center;
		/* 使文本居中 */
	}

	.title_middlebox_text {
		font-size: 16px;
		color: white;
		font-weight: 500;
	}

	.title_rightbox {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 使文本居中 */
	}

	/* 
	.title_rightbox_img {
		width: 22px;
		display: block;
		height: 22px;
	} */

	/* 密码部分样式 */
	.mimabox {
		padding: 2%;
		background-color: white;
	}

	.mimabox_textimgbox {
		display: flex;
		align-items: center;
		background: white;
		border-bottom: 1px solid #eee;
		padding: 4% 0;
	}

	.mimabox_textimgbox_text1 {
		font-size: 15px;
		color: red;
	}

	.mimabox_textimgbox_text2 {
		font-size: 15px;
		/* margin-right: 10%; */
		width: 30%;
	}

	.mimabox_textimgbox_text3 {
		margin-right: 15%;
		font-size: 15px;
	}

	.mimabox_textimgbox_img1 {
		display: block;
		width: 17px;
		height: 17px;
		margin-right: 2%;
	}

	.mimabox_textimgbox_img2 {
		display: block;
		width: 24px;
		height: 24px;
	}

	/* 按钮部分 */
	button {
		color: white;
		font-size: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #e23234;
		width: 80%;
		margin-top: 5%;
		/* margin-bottom: 10%; */
	}

	/* 安全提示部分 */
	.anquantishibox {
		padding: 2%;
		text-align: right;

	}

	/* 	.anquantishibox_text{
		font-size: 15px;
		padding: 2% 0;
	} */
</style>
